<template>
    <div>
        <!-- 头部 
        left-arrow：左边箭头
        $router.back() 返回上一个路由地址
        -->
        <van-nav-bar title="个人信息编辑" left-arrow @click-left="$router.back()">
            <!-- v-slot: 简写就是 # -->
            <template #right>
                <van-icon name="wap-home-o" size="20" @click="$router.push('/index')" />
            </template>
        </van-nav-bar>
        <!-- 内容 -->
        <div class="content">
            <div class="head_img">
                <!-- <img src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg" alt=""> -->
                <img :src="user.head_img | joinPath" alt="">
                <!-- <input type="file"> -->
                <van-uploader :after-read="afterRead" />
            </div>
            <van-cell title="昵称" is-link :value="user.nickname" @click="showDialogFn" />
            <van-dialog v-model="showNickname" title="编辑昵称" show-cancel-button
            :before-close="nicknameBeforeCloseFn"
            @confirm="changeNicknameFn">
                  <van-field
                    v-model.trim="nickname"
                    required
                    label="昵称"
                    placeholder="请输入昵称"
                />
            </van-dialog>
            <van-cell title="密码" is-link value="******" @click="showPasswordDialogFn"  />
            <van-dialog v-model="showPassword" title="编辑密码" show-cancel-button
            :before-close="pwBeforeCloseFn"
            @confirm="pwChangeFn">
                <van-field
                v-model="oldPw"
                    required
                    label="原密码"
                    placeholder="请输入原密码"
                />
                <van-field
                v-model="newPw"
                    required
                    label="新密码"
                    placeholder="请输入新密码"
                />
            </van-dialog>
            <van-cell title="性别" is-link :value="user.gender === 1?'男':'女'" @click="showGenderFn" />
            <!-- actions：定义选项
            select: 选择选项时触发的函数 -->
            <van-action-sheet v-model="genderShow" :actions="actions" @select="onSelect" />
        </div>
        <!-- 
            插槽的复习使用
            <myTest>
            <template v-slot:left>
                左边
            </template>
            <template #right>
                <van-icon name="wap-home-o" size="20" />
            </template>
        </myTest> -->
    </div>
</template>

<script>
// import myTest from "@/components/myTest.vue"
import { userInfo, upload, user_update } from "@/api/user"
export default {
    // components: { myTest },
    data(){
        return {
            user: {},
            id: null,
            showNickname: false,
            nickname: "",
            showPassword: false,
            oldPw: "",
            newPw: "",
            genderShow: false,
            actions: [ {name: "男", gender: 1}, {name: "女",gender: 0} ]
        }
    },
    created(){
        this.id = localStorage.getItem("75-userId")
        userInfo(this.id).then(res=>{
            this.user = res.data.data;
        })
    },
    methods: {
        // 修改性别
        onSelect(action, index){
            // action：当前用户点击的选项对应的对象
            // index: 当前用户点击选项的下标值
            // console.log(93,action,index);
            user_update(this.id, {
                gender: action.gender
            }).then(res=>{
                console.log(99, res);
                if(res.data.message === "修改成功"){
                    // 更新浏览器中显示的性别
                    this.user.gender = action.gender
                    // 关闭弹窗
                    this.genderShow = false
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        // 显示弹窗
        showGenderFn(){
            this.genderShow = true
        },
        // 修改密码优化：弹窗关闭前会触发的一个函数，可以用这个函数来阻止弹窗关闭
        pwBeforeCloseFn(action, done){
            if(action === "confirm"){
                // 点击了确认按钮
                // 判断原密码是否正确
                if(this.oldPw != this.user.password || this.oldPw === this.newPw || !this.newPw){
                    done(false)
                }else{
                    done()
                }
            }else{
                // 点击了取消按钮
                done()
            }
        },
        // 修改密码
        pwChangeFn(){
            // 判断原密码是否正确
            if(this.oldPw != this.user.password){return this.$toast.fail("原密码输入错误！")}
            // 判断新旧密码是否相同
            if(this.oldPw === this.newPw){return this.$toast.fail("新密码不能和原密码相同！")}
            // 新密码不能为空
            if(!this.newPw){return this.$toast.fail("新密码不能为空！")}
            // 调用接口 实现修改密码
            user_update(this.id, {
                password: this.newPw
            }).then(res=>{
                console.log(104,res);
                if(res.data.message === "修改成功"){
                    // 更新原密码
                    this.user.password = this.newPw
                    // 提示用户修改密码成功
                    this.$toast.success(res.data.message)
                    // 清空输入框中的新旧密码
                    this.oldPw  = ""
                    this.newPw = ""
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        // 控制密码弹窗的显示
        showPasswordDialogFn(){
            this.showPassword = true
        },
        // 昵称弹窗 关闭前触发的函数
        // 组件只要加上了before-close属性，那么弹窗就必须调用done函数之后才会关闭
        nicknameBeforeCloseFn(action, done){
            // 当输入的昵称为空，且 用户点击确认按钮
            if(!this.nickname && action === "confirm"){
                done(false)
            }else{
                done()
            }
        },
        // 修改昵称
        changeNicknameFn(){
            // console.log(68);
            if(!this.nickname) {return this.$toast.fail("昵称不能为空！")}
            user_update(this.id, {
                nickname: this.nickname
            }).then(res=>{
                // console.log(72,res);
                if(res.data.message == "修改成功"){
                    // 更新浏览器中显示的昵称
                    this.user.nickname = this.nickname
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        showDialogFn(){
            // 控制弹窗的显示
            this.showNickname = true;
            // 显示原来的昵称
            this.nickname = this.user.nickname;
        },
        // 修改头像
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // console.log(file);
            // 上传文件必须使用formData数据格式
            let formdata = new FormData()
            // 把获取到的图片对象添加到formData对象中
            // 注意：键名为“文件上传”接口文档中规定的参数名
            // formdata.append("键名","键值")
            formdata.append("file",file.file)
            upload(formdata).then(res=>{
                // console.log(62,res);
                // 图片上传失败时，添加提示
                if(res.data.message !== "文件上传成功"){
                    return this.$toast.fail(res.data.message+"，图片只支持png和jpg格式！")
                }
                let url = res.data.data.url
                // 调用修改头像的接口
                user_update( this.id, {
                    head_img: url
                } ).then(res=>{
                    // 判断修改成功后，更新浏览器上的头像
                    if(res.data.message == "修改成功"){
                        this.user.head_img = url
                    }else{
                        this.$toast.fail(res.data.message)
                    }
                })
            })
        },
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    border-bottom: 1px solid #ddd;
    .van-icon {
        color: #000;
    }
}
.content{
    .head_img{
        width: 80px;
        height: 80px;
        margin: 20px auto;
        position: relative;
        img{
            width: 100%;
        }
        .van-uploader{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
    }
    .van-cell {
        border-bottom: 1px solid #ddd;
    }
}
</style>